<template>
	<TaskContainer>
	  <div class="task-extra">
		  <el-descriptions :column="3" border>
			<el-descriptions-item>
				<template #label>难易程度</template>
        {{levelName}}
			</el-descriptions-item>
			
			<el-descriptions-item>
				<template #label>阶段名称</template>{{this.stage}}
			</el-descriptions-item>
			
			<el-descriptions-item>
				<template #label>模块名称</template>{{this.module}}
			</el-descriptions-item>
		
			<el-descriptions-item>
				<template #label>任务标题</template>
				{{this.title}}
			</el-descriptions-item>
		  </el-descriptions>
	  </div>
	  
	  <!-- 任务答案、学生端显示答案、企业端不显示答案！ -->
	  <TaskCode tips="答案" :code="code" v-if="!role " ></TaskCode>
	  
	</TaskContainer>
</template>

<script>

import HeaderNav from '@/components/HeaderNav.vue'
import TaskContainer from '@/components/TaskContainer.vue'
import TaskCode from '@/components/TaskCode.vue'
import Token from '@/api/token'
export default {
	components: {
		HeaderNav,
		TaskContainer,
		TaskCode,
	},
  computed: {
    levelName() {
      switch (this.level) {
        case 1:
          return '简单题';
        case 2:
          return '中等题';
        case 3:
          return '难题';
        case 4:
          return '选做题';
      }
    },
  },
	data(){
		return {
      role:Token.getUser().is_staff,
			code : '',
      stage:'',
      module:'',
      title:null,
      level:'',
		}
	},
  created(){
    if(Token.getUser().is_staff){
      this.getTask();
    }else{
      this.userGetTask();
    }
  },
  methods: {
    userGetTask(){
      //学生端的任务
      console.log(this.$route.params.id)
      this.$api.getAssignment(this.$route.params.id).then(ret=>{
        console.log("==========================")
        console.log(ret)
        this.code = ret.task_answer
        this.level=ret.task.level
        this.stage=ret.task.stage.name
        this.module=ret.task.module.name
        this.title= ret.task.title
      })
    },
    getTask(){
      //企业端的任务
      this.$api.getTask(this.$route.params.id).then(ret=>{
        console.log(ret,22222222222222222222222222)
        this.level=ret.level
        this.stage=ret.stage
        this.module=ret.module
        this.title= ret.title
      })
    }
  }
}
</script>

<style>
.task-extra {
	flex: 1 1 auto;
	margin-top: 20px; 
	
}
.task-extra .el-tag {
	margin: 0 2px;
}
</style>